<template>
  <div>
    <van-nav-bar
      class="w"
      title="人气推荐"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="box">
      <div
        class="box1"
        v-for="item in list"
        :key="item"
        @click="renxiang(item.id)"
      >
        <img :src="item.pic" />
        <h5>{{ item.name }}</h5>
        <p>{{ item.characteristic }}</p>
        <p class="w1">￥{{ item.minPrice }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$API.ren().then((res) => {
      this.list = res.data.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/home" });
    },
    renxiang(id) {
      this.$router.push({ path: "/renxiang", query: { id: id } });
    },
  },
};
</script>
<style  scoped>
.w {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin-bottom: 20px;
}
.box {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.box1 {
  width: 40%;
  height: 200px;
  margin-top: 30px;
  margin-bottom: 60px;
}
h5,
p {
  width: 100%;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
h5 {
  margin-top: 8px;
}
p {
  margin-top: -23px;
}
img {
  width: 100%;
  height: 150px;
  float: left;
}
.w1 {
  color: red;
  margin-top: 3px;
}
</style>